/************
 * Nautilus *
 ************/
// based css:
// https://gitlab.gnome.org/GNOME/nautilus/blob/master/src/resources/css/Adwaita.css
// hard-coded css:
// https://gitlab.gnome.org/GNOME/nautilus/blob/master/src/resources/css/nautilus.css

%pathbar_box_button {
  border-radius: $circular_radius;
  color: $inverse_secondary_fg_color;
  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                $inverse_secondary_fg_color 0%,
                                transparent 0%)
                                0 0 0 / 0 0 0;



  &:hover {
    color: $inverse_fg_color;
  }

  &:checked, &:active {
    color: $inverse_fg_color;
    background-color: transparent;
    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  $inverse_fg_color 100%,
                                  transparent 0%)
                                  0 0 2 / 0 0 2px;
  }

  &:checked:backdrop, &:active:backdrop {
    color: $inverse_disabled_fg_color;
    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  $inverse_disabled_fg_color 100%,
                                  transparent 0%)
                                  0 0 2 / 0 0 2px;
  }

  &:backdrop {
    color: $inverse_disabled_secondary_fg_color;

    &:hover {
      color: $inverse_secondary_fg_color;
    }
  }
}

$nautilus_bg_color: if($titlebar == 'dark' and $variant == 'light', $base_color, $titlebar_bg_color);

.nautilus-window {
  background-image: $theme_image;
  background-size: 48px auto;
  background-position: left bottom;
  background-repeat: no-repeat;

  &.csd.background {
    background-color: if($solid == 'false', rgba($nautilus_bg_color, 0.97), $nautilus_bg_color);
    border-radius: 0 0 $windows_radius $windows_radius; // It also has an effect on nautilus notebook stacks background

    notebook {
      background-color: transparent;
      border-radius: 0 0 $windows_radius $windows_radius;

      > stack {
        background-color: transparent;
        border-radius: $windows_radius;
      }

      scrolledwindow  .view:not(:hover):not(:active):not(:selected) {
        background-color: transparent;

        header button:not(:hover):not(:active):not(:checked) {
          background-color: transparent;
        }
      }
    }

    &.unified headerbar {
      background-color: if($titlebar == 'dark' and $variant == 'light', $titlebar_bg_color, transparent);
      box-shadow: none;
    }
  }

  // No border radius when window maximized
  &.maximized.csd.background,
  &.maximized placessidebar,
  &.maximized notebook,
  &.maximized notebook > stack { border-radius: 0; }

  placessidebar {
    background: none;
    margin-right: 6px;

    list {
      background: none;
    }

    row {
      padding-left: 6px;

      &, &:hover, &:selected, &:active, &:selected:hover, &:selected:active, &:focus {
        transition: none;
        animation: none;
        background: none;
        box-shadow: none;
      }

      &:selected button.sidebar-button  { @extend %selected_sidebar_button; }

      image.sidebar-icon {
        color: $inverse_secondary_fg_color;
        margin-right: 6px;
      }

      label.sidebar-label {
        padding-left: 18px;
        color: $secondary_fg_color;
        border-radius: 0 $buttons_radius $buttons_radius 0;
      }

      &:hover {
        label.sidebar-label {
          background-color: rgba($divider_color, 0.03);
        }
      }

      &:backdrop { opacity: 0.85; }

      &:selected {
        // font-weight: bold;

        label.sidebar-label {
          color: if($variant == 'light', $primary_color, lighten($primary_color, 15%));
          background-color: rgba($divider_color, 0.06);
        }

        image.sidebar-icon { color: $inverse_fg_color; }
      }
    }

    separator { background-color: transparent; }
  }

  $header-icon: if($titlebar == 'dark' and $variant == 'light',
                -gtk-scaled(url('assets/header-icon-alt.png'), url('assets/header-icon-alt@2.png')),
                -gtk-scaled(url('assets/header-icon.png'), url('assets/header-icon@2.png')));

  headerbar {
    background-color: if($solid == 'false', rgba($titlebar_bg_color, 0.97), $titlebar_bg_color);
    background-image: $header-icon;
    background-size: 48px auto;
    background-position: left bottom;
    background-repeat: no-repeat;
    padding-left: 54px;
    box-shadow: inset 0 1px $titlebar_highlight_color;

    > revealer > button { @extend %circular_button; } // Make operations button circular

    .path-bar-box { // Fixed nautilus 3.30 pathbar
      background-image: $theme_image;
      background-size: auto auto;
      background-position: center center;
      background-repeat: no-repeat;
      border-radius: 100px;
      padding-left: 22px;
      margin-left: 6px;
      margin-right: 6px;
      box-shadow: if($variant == 'light', $header_shadow_light, $header_shadow_dark);

      button { @extend %pathbar_box_button; }

      .linked.nautilus-path-bar { // for ≥ 3.31.90
        button.text-button,
        button.image-button.text-button {
          margin-top: 0;
          margin-bottom: 0;
          border-radius: 100px;

          &:not(:only-child):last-child {
            color: $inverse_fg_color;
            border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                          $inverse_fg_color 100%,
                                          transparent 0%)
                                          0 0 2 / 0 0 2px;


            &:backdrop {
              color: $inverse_disabled_fg_color;
              border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                            $inverse_disabled_fg_color 100%,
                                            transparent 0%)
                                            0 0 2 / 0 0 2px;
            }
          }
        }
      }

      // &.width-maximized {
      //   button { @extend %pathbar_box_button; }
      // }

      // workaround for 3.30.1
      &.background.frame {
        border: none;
        background-color: transparent;
      }
    }
  }

  // >= 42.0
  .windowhandle .linked.nautilus-path-bar {
    border-radius: $circular_radius;
    margin: $container_padding;
    background-image: $theme_image;
    background-size: auto auto;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: if($variant == 'light', $header_shadow_light, $header_shadow_dark);

    .dim-label { color: $inverse_secondary_fg_color; }

    button:not(.suggested-action):not(.destructive-action) {
      margin-top: 0;
      margin-bottom: 0;
      color: $inverse_secondary_fg_color;

      &:hover {
        background-color: $inverse_divider_color;
        box-shadow: none;
      }

      &:active, &:checked {
        background-color: $inverse_track_color;
        box-shadow: none;
        background-image: none;
      }

      &:hover, &:active, &:checked {
        color: $inverse_fg_color;
      }

      &.current-dir {
        color: $inverse_fg_color;

        &:hover, &:active {
          background: none;
          box-shadow: none;
        }
      }
    }

    button.toggle.popup {
      border-radius: $circular_radius;

      &:checked {
        background-color: $inverse_track_color;
        box-shadow: none;
        background-image: none;
      }
    }
  }

  paned > separator { // Ensure paned separator rendering. See issue #84 for details.
    min-width: 20px;
    color: transparent;
    background-image: url("assets/scalable/side-paned.svg");
    background-size: 20px 750px;
    background-position: left center;
    background-repeat: no-repeat;
  }

  // Floating status bar
  .floating-bar {
    @extend %osd;

    min-height: 32px;
    padding: 0;
    border-style: solid solid none;
    border-width: 1px;
    border-color: $border_color;
    border-radius: $windows_radius $windows_radius 0 0;
    background-color: $base_color;
    background-clip: $extra_background_clip;
    transition: $longer_transition, border-width 0;

    &.bottom.left { // axes left border and border radius
      margin-right: 8px - 1px;
      border-left-style: none;
      border-top-left-radius: 0;
      border-bottom-left-radius: $windows_radius;
    }

    &.bottom.right { // axes right border and border radius
      margin-left: 8px - 1px;
      border-right-style: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: $windows_radius;
    }

    button {
      margin: (32px - $small_size) / 2;

      @extend %small_button;
    }
  }

  // Reset maximized nautilus-window floating-bar border-radius
  &.maximized .floating-bar {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  // Workaround for the double border of the searchbar since we use a revealer which
  // always allocates at least 1 pixel
  searchbar {
    border-top: 1px solid $border_color;
    background-color: rgba($bg_color, 0.65);
  }

  .searchbar-container { margin-top: -1px; }

  // Icon view
  flowboxchild {
    // > widget > box > .icon-background { background-color: black; }

    > widget > .icon-item-background {
      padding: 4px;
      border-radius: $material_radius;
    }

    &:selected {
      background-color: transparent;

      > widget > .icon-item-background {
        background-color: $primary_color;
      }
    }
  }
}

.nautilus-canvas-item {
  border-radius: $material_radius;
}

// .nautilus-canvas-item.dim-label,
// .nautilus-list-dim-label {
//   @extend .dim-label;
// }

%desktop-canvas-item,
.nautilus-desktop.nautilus-canvas-item:not(:selected) {
  // background-color: rgba($black, $lower_opacity);
  color: $inverse_fg_color;
  text-shadow: $shadow_1;
}

// Toolbar
@keyframes needs_attention_keyframes {
  to { background-color: $fill_color; }
}

.nautilus-operations-button-needs-attention {
  animation: needs_attention_keyframes $longer_duration $standard_curve 2 alternate;
}

.nautilus-operations-button-needs-attention-multiple {
  animation: needs_attention_keyframes $longer_duration $standard_curve 4 alternate;
}

.disk-space-display {
  // border-style: solid;
  // border-width: $buttons_radius;

  &.unknown { background-color: $warning_color; }
  &.used { background-color: $primary_color; }
  &.free { background-color: $divider_color; }
}

// View
// Hide superfluous treeview drop target indication
// .nautilus-list-view .view:not(.dnd) {
//   border-bottom: 1px solid $border_color;
// }

.documents-entry-tag {
  @extend .entry-tag;
}

.conflict-row:not(:selected) { background-color: mix($warning_color, $base_color, percentage($lower_opacity)); }

// Batch rename dialog
dialog.background > box.dialog-vbox.vertical > grid.horizontal {
  > scrolledwindow.frame { border-style: none; }

  > box.horizontal:last-child {
    // margin: -6px 0 0 -6px;
    border-top: 1px solid $border_color;

    > label { margin: 0 8px; }
    // > box > button { border-radius: 0; }
  }
}

.nautilus-menu-sort-heading {
  // min-height: 26px;
  // padding-left: 5px;
  // padding-right: 5px;
  margin: 1px 3px;
  font-weight: 500;

  &:disabled { color: $hint_fg_color; }
}


/*********
 * gedit *
 *********/
// based css:
// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit.adwaita.css
// hard-coded css:
// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit-style.css

// Only normal state is handle
.open-document-selector-name-label {
  // font-weight: bold;
}

// Only normal state is handle
.open-document-selector-path-label {
  color: $secondary_fg_color;
  font-size: smaller;

  &:selected { color: $inverse_secondary_fg_color; }
}

.gedit-document-panel {
  background-color: $lighter_bg_color;

  // Try to look as the notebook tab close button
  row button.flat {
    margin: 8px;

    @extend %small_button;
  }
}

.gedit-document-panel-group-row:not(:first-child) {
  border-top: 1px solid $border_color;
}

.gedit-side-panel-paned statusbar {
  border-top: 1px solid $border_color;
}

.gedit-search-slider {
  margin: 4px 4px 8px;

  entry {
    &:dir(ltr),
    &:dir(rtl) { // specificity bump
      border-radius: $buttons_radius;

      .gedit-search-entry-occurrences-tag {
        all: unset;
        color: $hint_fg_color;
      }
    }

    $buttons_width: $small_size * 2 + $container_padding * 3;

    &:dir(ltr) {
      margin-right: -$buttons_width;
      padding-right: $buttons_width;

      .gedit-search-entry-occurrences-tag { margin-left: $container_padding; }
      image.right { margin-right: 0; }
    }

    &:dir(rtl) {
      margin-left: -$buttons_width;
      padding-left: $buttons_width;

      .gedit-search-entry-occurrences-tag { margin-right: $container_padding; }

      image.left { margin-left: 0; }
    }

    &.error ~ button {
      color: $inverse_secondary_fg_color;

      &:hover, &:active { color: $inverse_fg_color; }
      &:disabled { color: $inverse_disabled_secondary_fg_color; }
    }
  }

  button {
    border: solid $container_padding transparent;
    @extend %simple_flat_button;

    &:dir(ltr),
    &:dir(rtl) { @extend %small_button; } // specificity bump

    &:last-child:dir(ltr),
    &:not(:first-child):dir(rtl) { margin-left: -$container_padding / 2; }

    &:first-child:dir(rtl),
    &:not(:last-child):dir(ltr) { margin-right: -$container_padding / 2; }
  }
}

frame.gedit-map-frame > border {
  &:dir(ltr) { border-style: none none none solid; }
  &:dir(rtl) { border-style: none solid none none; }
}

paned.titlebar.horizontal { // show border
  headerbar { box-shadow: inset 0 1px $titlebar_highlight_color, inset 0 -1px $border_color; }
}

.gedit-side-panel-paned.horizontal {
  // 'file-browser' pane
  > box.vertical > stack > grid.horizontal {
    padding: 3px 3px 0;

    > box.horizontal {  // header-part
      margin: 0 0 2px;

      button.image-button.small-button {
        // FIXME: why does gedit break our geometry everytime?
        padding: 4px;
        border-radius: $buttons_radius;
        -gtk-outline-radius: $buttons_radius;
      }

      button.popup.small-button.toggle {
        padding: 4px;
      }
    }

    > scrolledwindow { // raised widget
      margin: 2px 6px 6px;
      border-radius: $buttons_radius;
      box-shadow: $shadow_1;

      row.activatable { padding: 3px; }
    }

    // 'files' pane
    stack {
      scrolledwindow {
        viewport.frame {
          list.gedit-document-panel {
            background: none;
          }
        }
      }
    }
  }
}


 /**********************
  *  Gnome Tweak Tool  *
  **********************/
// the sidebar
.tweak-categories {
  // padding: 4px 0;
  // background-color: shade(@theme_bg_color, 0.99);
  background-image: image($lighter_bg_color);

  separator { @extend %hide_separators; }

  .csd & {
    border-bottom-left-radius: $windows_radius;
  }
}

leaflet list.navigation-sidebar {
  background-color: $alt_base_color;
  border-bottom-left-radius: $windows_radius;

  > separator {
    background-color: transparent;
  }
}

.tweak {
  // padding-top: 3px;
  padding: 3px;

  &.title:hover { box-shadow: none; }
}

.tweak-group-white,
.tweak-white,
.tweak-white:hover {
  // background-color: white;
  background-image: image($base_color);
}



.tweak-group-startup {
  @extend %circular_list;

  row.activatable { @extend %circular_row; }

  row.tweak-startup {
    border-radius: $windows_radius;
    background-color: transparent;
    background-image: none;
  }
}

// Workaround for 3.26
list {
  &.tweak-group, &#ListBoxTweakGroup {
    list {
      padding: 0;
      @extend %circular_list;

      row.activatable {
        @extend %circular_row;
      }
    }
  }
}

// Add more spaces between title and list
row#Focus,
row#PrimaryWorkspaceTweak, // for 3.26.0
row#workspaces-only-on-primary {
  margin-top: 4px;
}


/***********
 * Builder *
 ***********/
// based css for 3.22:
// https://git.gnome.org/browse/gnome-builder/tree/data/theme?h=gnome-builder-3-22
// based css for 3.24:
// https://git.gnome.org/browse/gnome-builder/tree/data/theme?h=gnome-builder-3-24
// based css for 3.26:
// https://git.gnome.org/browse/gnome-builder/tree/data/themes?h=gnome-builder-3-26

// Layout tab and tab bar tweaks
// The following makes the layout stack header look similar to a tab bar.
layouttabbar {
  border-bottom: 1px solid $border_color;
  background-color: $bg_color;

  button { @extend %flat_button; }

  > box > button {
    margin: (40px - $medium_size) / 2 0;
    // border-radius: 0;
  }
}

layouttab {
  margin: 0 8px; // not working
  border-style: none solid;
  border-width: 1px;
  border-color: $border_color;
  box-shadow: inset 0 -2px $primary_color;
  background-color: $base_color;

  separator.vertical { margin: 8px 4px; }

  button {
    &.text-button, &.image-button, & {
      margin-top: 8px;
      margin-bottom: 8px;
      padding: 0 4px;
    }
  }

  // Close button styling for layouttab.
  // > box > button.close { @extend %circular_button; }
}

layout {
  border: 1px solid $border_color;
  -PnlDockBin-handle-size: 1;
}

entry.search-missing {
  background-color: $error_color;
  color: $inverse_fg_color;
}

// tweak icons for treeviews
window.workbench treeview.image {
  color: $secondary_fg_color;

  &:selected { color: $inverse_secondary_fg_color; }
}

popover.popover-selector list {
  padding: 8px - 2px;

  row {
    border-radius: $buttons_radius;

    image {
      &:dir(ltr) { margin-right: 6px; }
      &:dir(rtl) { margin-left: 6px; }
    }

    .accel {
      &:dir(ltr) { margin-left: 6px; }
      &:dir(rtl) { margin-right: 6px; }
    }
  }
}

omnibar {
  &.linked:not(.vertical) entry { border-radius: $buttons_radius; }

  &:not(:hover):not(:active) entry { color: $secondary_fg_color; }
}

popover.omnibar list row:not(:last-child) {
  border-bottom: 1px solid $border_color;
}

entry.preferences-search {
  @extend %flat_entry;

  box-shadow: inset 0 -1px $border_color;
  background-color: $base_color;

  // doesn't work properly
  // &:dir(ltr) { border-right: 1px solid $border_color; }
  // &:dir(rtl) { border-left: 1px solid $border_color; }
}

preferences stacksidebar.sidebar {
  list { background-color: $lighter_bg_color; }

  &:dir(ltr),
  &:dir(rtl) { list { border-style: none; }}

  list separator { @extend %hide_separators; }
}

preferences > box > box {
  &:dir(ltr) { border-right: 1px solid $border_color; }
  &:dir(rtl) { border-left: 1px solid $border_color; }
}

popover.messagepopover {
  &.background { padding: 0; }

  .popover-action-area button {
    @extend %simple_flat_button;

    padding: 8px 16px;
    border-top: 1px solid $border_color;
    border-radius: 0;

    &:first-child { border-bottom-left-radius: $buttons_radius; }

    &:last-child { border-bottom-right-radius: $buttons_radius; }
  }

  .popover-content-area { margin: 16px; }
}

popover.transfers list {
  background-color: transparent;

  row:not(:first-child) { border-top: 1px solid $border_color; }

  row > box { padding: 10px; }
}

dockbin {
  border: 1px solid $border_color;
  -PnlDockBin-handle-size: 1;
}

dockpaned {
  border: 1px solid $border_color;
}

eggsearchbar box.search-bar {
  padding: 0 8px;
  border-bottom: 1px solid $border_color;
  background-color: $bg_color;
}

docktabstrip {
  padding: 0 8px;
  border-bottom: 1px solid $border_color;
  background-color: $bg_color;
}

docktab {
  transition: $longer_transition,
              background-size 0,
              background-image 0;
  min-height: $small_size;
  min-width: $small_size;
  margin-bottom: -1px;
  padding: $container_padding 6px;

  outline-offset: -6px;

  border-width: 1px;         // for reorderable tabs
  border-color: transparent; //

  background-image: radial-gradient(circle farthest-corner at center,
                                    $primary_color 10%,
                                    transparent 0%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0% 0%;

  color: $secondary_fg_color;
  font-weight: 500;

  &:hover {
    box-shadow: inset 0 -2px $track_color;
    color: $fg_color;
  }

  &:checked {
    transition: $longer_transition,
                background-size $longer_duration $deceleration_curve,
                background-image $longer_duration + $ripple_duration $deceleration_curve;
    box-shadow: inset 0 -2px $primary_color;
    background-image: radial-gradient(circle farthest-corner at center,
                                      transparent 10%,
                                      transparent 0%);
    background-size: 1000% 1000%;
    color: $fg_color;
  }
}

dockoverlayedge {
  background-color: $bg_color;

  docktabstrip {
    padding: 0;
    border: none;
  }

  &.left-edge docktab {
    &:hover { box-shadow: inset -2px 0 $track_color; }
    &:checked { box-shadow: inset -2px 0 $primary_color; }
  }

  &.right-edge docktab {
    &:hover { box-shadow: inset 2px 0 $track_color; }
    &:checked { box-shadow: inset 2px 0 $primary_color; }
  }
}

pillbox {
  background-color: $bg_color;
  border-radius: $buttons_radius;
}

buildperspective row {
  // padding: 10px;
}

layoutpane entry.search {
  @extend %flat_entry;

  box-shadow: inset 0 -1px $border_color;
  background-color: $base_color;
}

editortweak entry.search {
  @extend %flat_entry;

  margin-bottom: -1px;
  box-shadow: none;
}

//
// let's tweak hard-coded elements
//

.gb-search-entry-occurrences-tag {
  box-shadow: none;
  background-color: transparent;
}

// Keep search bar and layouttab height in sync.
// layouttabbar > box,
// eggsearchbar > revealer > box,
docktabstrip {
  min-height: 39px;
}

eggsearchbar entry {
  // min-height: 24px;
}

window.workbench preferences preferencesgroup list entry {
  // background: none;
  // min-height: 0px;
  padding-top: 8px;
  padding-bottom: 8px;
}

button.run-arrow-button {
  // min-width: 12px;
  padding-left: ($medium_size - 16px) / 2;
  padding-right: ($medium_size - 16px) / 2;
}

//
// Additional styles for 3.26
//

button.dzlmenubutton image {
  min-width: $medium_size - 6px;

  &.arrow { min-width: $medium_size - 9px; }
}

button.dzlmenubuttonitem {
  color: $fg_color;
  font-weight: normal;

  &:disabled { color: $disabled_fg_color; }
}

idelayoutstackheader {
  border-bottom: 1px solid $border_color;

  button:checked { color: $fg_color; }
}

// utilities stack switcher
ideeditorutilities > dzldockpaned > box > stackswitcher {
  padding: 8px 0;
  background-color: $bg_color;

  &:dir(ltr) { border-right: 1px solid $border_color; }

  &:dir(rtl) { border-left: 1px solid $border_color; }

  button {
    border-radius: 0;
    outline-offset: -6px;
    box-shadow: none;
    background-color: transparent;

    &:active {
      background-image: radial-gradient(circle farthest-corner at center,
                                        rgba($primary_color, 0.7) 10%,
                                        transparent 0%);
    }

    &:checked {
      background-color: transparent;
      color: $fg_color;
    }

    &:dir(ltr) {
      margin-right: -1px;

      &:hover { box-shadow: inset -2px 0 $track_color; }

      &:active,
      &:checked { box-shadow: inset -2px 0 $primary_color; }
    }

    &:dir(rtl) {
      margin-left: -1px;

      &:hover { box-shadow: inset 2px 0 $track_color; }

      &:active,
      &:checked { box-shadow: inset 2px 0 $primary_color; }
    }
  }
}

// buildui panel
ideeditorsidebar notebook header {
  background: transparent;
}

popover.messagepopover {
  // padding: 0;

  list {
    border: 1px solid $border_color;

    row:not(:last-child) { border-bottom: 1px solid $border_color; }
  }
}


/**********
 * Photos *
 **********/
// based css:
// https://git.gnome.org/browse/gnome-photos/tree/data/Adwaita.css

GdMainIconView.content-view {
  -GdMainIconView-icon-size: 48;

  // Make spinner visible on both dark and bright backgrounds w/o making
  // it look ugly/weird.
  // &.cell:active { color: $hint_fg_color; }
}

.documents-counter {
  margin: 8px;
  border-radius: $circular_radius;
  box-shadow: $shadow_2;
  background-color: $accent_color;
  color: $inverse_fg_color;
  font-weight: bold;
}

.photos-entry-tag {
  @extend .entry-tag;
}

.documents-scrolledwin.frame {
  border-style: none;

  frame.content-view > border { border-style: none; }
}

// .photos-icon-bg { }

.photos-fade-in {
  opacity: 1;
  transition: opacity $shorter_duration $deceleration_curve;
}

.photos-fade-out {
  opacity: 0;
  transition: opacity $shorter_duration $deceleration_curve;
}

.photos-collection-icon {
}

overlay grid.horizontal > revealer > scrolledwindow.frame {
  &:dir(ltr) { border-style: none none none solid; }
  &:dir(rtl) { border-style: none solid none none; }
}

// documents-scrolledwi (Totem, Documents, EvView)
.documents-scrolledwin {
  background-color: transparent;

  .content-view {
    background-color: transparent;
    border-radius: 0 0 $windows_radius $windows_radius;
  }

  viewport.frame { // Documents
    background-color: transparent;

    widget > frame.content-view {
      border { border: none; }

      background-color: transparent;
      border-radius: 0 0 $windows_radius $windows_radius;
    }
  }
}

/*********
 * Music *
 *********/
// hard-coded css:
// https://git.gnome.org/browse/gnome-music/tree/data/application.css

.side-panel:dir(ltr) {
  // border-width: 0 1px 0 0;
  border-style: solid;
  border-color: $border_color;
}

.side-panel:dir(rtl) {
  // border-width: 0 0 0 1px;
  border-style: solid;
  border-color: $border_color;
}

.side-panel .view {
  // background-color: mix(@theme_fg_color, @theme_bg_color, 0.9);
  background-image: image($lighter_bg_color);

  &:hover { background-image: image(mix($fg_color, $lighter_bg_color, percentage(0.05))); }
}

.side-panel .view:selected {
  // background-color: mix(@theme_fg_color, @theme_bg_color, 0.5);
  background-image: image($primary_color);

  &:hover { background-image: image(mix($inverse_fg_color, $primary_color, percentage(0.05))); }
}

.songs-list {
  // box-shadow: inset 0 -1px shade(@borders, 1.30);
  // background-color: @theme_bg_color;

  &:hover { background-image: image($row_fill_color); }
}

frame.documents-dropdown {
  @extend %toolbar_osd;

  margin: 8px;

  > border { border: none; }
}

box.vertical > revealer > toolbar.search-bar {
  border-bottom: 1px solid $border_color;
  background-clip: border-box; // avoid black border

  button > widget {
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
    // -GtkArrow-arrow-scaling: 1;
  }
}

/*******************
 * Archive Manager *
 *******************/
.background.csd {
  > grid.horizontal > paned.horizontal {
    > scrolledwindow {
      border-radius: 0 0 $windows_radius $windows_radius;
      background-color: $base_color;

      treeview.view:not(:hover):not(:selected) {
        background-color: transparent;
      }
    }

    > box.vertical {
      > scrolledwindow {
        border-radius: 0 0 0 $windows_radius;
        background-color: $bg_color;

        treeview.view:not(:hover):not(:selected) {
          background-color: transparent;
        }
      }
    }
  }
}

/**************
 * Gnome-Logs *
 **************/
// titles inside the button!?
headerbar > button.flat.popup.title-menu-button.toggle {
  > grid {
    .title {
      margin: -3px 0;
      padding: 2px 4px 0;
      font-size: 90%;
    }
    .subtitle {
      margin: -3px 0;
      padding: 0 4px 2px;
      font-size: 80%;
    }
  }
}

window.background > box.vertical box.horizontal {

  list.categories { border-radius: 0 0 0 $windows_radius; } // side-pane

  > box.vertical > scrolledwindow > viewport.frame > list { // right-pane

    > separator {
      background-color: transparent; // hide single-line separators

      &.compressed-rows-group-separator { // use opaque colour
        background-image : image($base_color);
      }
    }

    // > 3.25.90
    row.event.activatable {

      label.compressed-entries-label { // hard-coded background-color?
        background-image: image($suggested_color);
        color: $inverse_fg_color;
        font-weight: 700;
      }

      &.compressed-row {
        background-image: image(darken($bg_color, 3%));
        color: darken($fg_color, 20%);

        &:hover {
          background-image: image(mix($fg_color, $bg_color, 5%));
          color: $fg_color;
        }

        &:active {
          &, &:focus {
            background-image: image(mix($fg_color,
                                        $bg_color, 10%));
            color: $fg_color;
            animation: none;
          }
        }

        &.popover-activated-row {
          background-color: $primary_color;
          color: $inverse_fg_color;
        }

        &-header {
          background-image: image($base_color);
          background-color: $base_color; // stop highlighting
          color: $primary_color;
          transition: none;
          animation: none;

          &:hover {
            background-color: $divider_color;
            color: $primary_color;
          }

          &:active, &:checked {
            &, &:focus {
              background-color: $track_color;
              background-image: image($base_color);
            }
          }

          label.compressed-entries-label {
            background-image: image($primary_color);
            color: $inverse_fg_color;
          }
        }
      }
    }
  }
}

 /************************
  * Gnome Control Center *
  ************************/

// users section
stack > box.vertical > widget > overlay grid.horizontal > stack {
  > button.toggle { margin: 8px 6px; } // Show the button shadow completely
}

box.horizontal.titlebar > headerbar > stack > box.vertical {
  > .title { margin: 0; }
  > .subtitle { margin: -3px 0; }
}

dialog.background.csd {
  > headerbar.titlebar {
    > label:not(.title):not(.subtitle) {
      font-weight: 700;
    }
  }
}

window.background.csd {
  > headerbar.titlebar { // gnome 3.32
    > box.horizontal > separator.sidebar,
    > hdyleaflet > separator.sidebar,
    > leaflet > separator.sidebar {
      border-right: none;
      background: none;
      min-width: 0;
    }
  }

  > hdyleaflet > stack.background, // > 3.34.0
  > leaflet > stack.background, // > 3.38.0
  > box.horizontal > stack.background {
    border-radius: 0 0 $windows_radius $windows_radius;

    > widget {
      > box.vertical > box.vertical { // Gnome 3.34 Wallpaper setting
        > scrolledwindow > viewport.frame {
          background-color: $base_color;
          border-bottom-right-radius: $windows_radius + 1px;

          > box.vertical.view {
            background: none;
          }
        }
      }
    }

    frame.view { border-radius: $buttons_radius; }
  }

  > hdyleaflet > box.vertical > scrolledwindow.view, // > 3.34.0
  > leaflet > box.vertical > scrolledwindow.view, // > 3.38.0
  > box.horizontal > box.vertical > scrolledwindow.view { // > 3.25.90
    background-color: $base_color;
    border-bottom-left-radius: $windows_radius + 1px;

    > viewport.frame > stack {
      background-color: transparent;

      list { // left-pane
        background-color: transparent;

        row.activatable:not(:hover):not(:active):not(:selected) {
          background-color: transparent;
        }
      }
    }
  }
}

hdyleaflet, leaflet {
  frame > border { border: none; }

  stack.background, overlay {
    scrolledwindow > viewport {
      list {
        @extend %circular_list;

        row.activatable { @extend %circular_row; }
      }
    }
  }

  > box.vertical > scrolledwindow > viewport.frame {
    list:not(.view):not(.tweak-group) {
      row.activatable {
        margin-right: 4px;
        border-radius: 0 $buttons_radius $buttons_radius 0;

        &:selected {
          background-color: rgba($divider_color, 0.06);
          color: if($variant == 'light', $primary_color, lighten($primary_color, 15%));

          image, label { color: if($variant == 'light', $primary_color, lighten($primary_color, 15%)); }
        }
      }
    }
  }
}

/************************
 * Gnome system monitor *
 ************************/
window#gnome-system-monitor.background.csd {
  > box.vertical > stack {
    background-color: $base_color;
    border-radius: 0 0 $windows_radius $windows_radius;

    > box.vertical > scrolledwindow {
      treeview.view {
        background: none;
        @extend %view;
      }
    }
  }
}

/************************
 * Gnome sound recorder *
 ************************/
stack {
  > grid.vertical {
    > scrolledwindow.frame {
      border: none;

      > viewport.frame {
        list {
          border-radius: 0 0 $windows_radius $windows_radius;
        }
      }
    }

    scrolledwindow.frame.emptyGrid { border: none; } // Removed ugly borders
  }
}

/******************
 * Gnome Contacts *
 ******************/
window.background.csd {
  > headerbar.titlebar.selection-mode {
    > hdyleaflet > headerbar,
    > leaflet > headerbar {
      background-color: $primary_color;

      &, &:hover, &:checked { color: $inverse_fg_color; }

      &:disabled, &:checked:disabled { color: $inverse_disabled_fg_color; }

      &:backdrop {
        &, &:hover, &:checked { color: $inverse_secondary_fg_color; }

        &:disabled, &:checked:disabled { color: $inverse_disabled_secondary_fg_color; }
      }
    }
  }

  > overlay > grid.horizontal {
    > frame:dir(ltr) > border { // Removed ugly borders
      border-top-width: 0;
      border-left-width: 0;
      border-bottom-width: 0;
    }

    .contacts-contact-form {
      border-bottom-right-radius: $windows_radius;
    }
  }
}

 /******************
  * Gnome calender *
  ******************/
popover.background {
  datechooser {
    day.day.other-month {
      color: $inverse_divider_color;

      &:hover, &:active, &:checked {
        color: $inverse_hint_fg_color;
        background-color: $inverse_divider_color;
      }
    }

    label.weekday {
      color: $inverse_secondary_fg_color; // FIXME: can not set color, use @define-color insensitive_fg_color
      font-weight: bold;
    }
  }
}

/****************
 * Gnome clocks *
 ****************/
window.background.csd.unified {
  border-top-left-radius: $windows_radius;
  border-top-right-radius: $windows_radius;

  > deck > deck > deck {
    > box.vertical > headerbar.titlebar.windowhandle {
      border-top-left-radius: $windows_radius;
      border-top-right-radius: $windows_radius;
      box-shadow: inset 0 -1px $border_color;

      > viewswitchertitle > squeezer {
        margin: 0 0;
        background: none;

        > viewswitcher > box.horizontal {
          > button.radio {
            margin: 0;
            padding: 0;
            border-radius: 0;
          }
        }
      }
    }

    list {
      @extend %circular_list;

      row.activatable { @extend %circular_row; }
    }
  }
}

/****************
 * Gnome Weather *
 ****************/

#weather-page,
#weekly-forecast-frame {
  border-bottom-right-radius: $windows_radius;
}

#weather-page-content-view {
  border-bottom-right-radius: $windows_radius;
  border-bottom-left-radius: $windows_radius;
}

 /*********
  * To Do *
  *********/
taskrow {
  transition: $shorter_transition;
  margin: 0 -8px;

  &:hover { transition: none; }

  label { margin: 0 8px; }

  image { min-width: 16px; }
}

task-list-view > box > revealer > box > button {
  margin: (12px * 2 - $medium_size) / 2;
}


/*******
 * eog *
 *******/
#eog-thumb-nav {
  scrolledwindow { border-top: none; }

  button { -gtk-outline-radius: $buttons_radius; }
}


/***********
 * Fractal *
 ***********/
.background.csd.main-window {
  .sidebar.rooms-sidebar {
    border-bottom-left-radius: $windows_radius;
    border-right: 1px solid $border_color;
  }
}


/*************
 * Evolution *
 *************/
frame.taskbar > border { border-style: solid none none; }

box.vertical > paned.horizontal notebook widget .frame { border-style: none; }


/********
 * gitg *
 ********/
frame.commit-frame > border { border-style: solid none none; }


/**************
 * Characters *
 **************/
box.dialog-vbox scrolledwindow.related { border: 1px solid $border_color; }

list.categories { background-image: image($lighter_bg_color); }


/*********
 * Boxes *
 *********/
.transparent-bg + stack overlay > label {
  min-height: 24px;
  padding: 0 4px;
  border-radius: $material_radius;
  background-color: rgba($black, $lower_opacity);
  color: $inverse_fg_color;
}


/**************
 * Calculator *
 **************/
button.title label { min-height: $medium_size; }


/*********
 * Geary *
 *********/
window.geary-main-window, // gtk 3.36.0 or later
window#GearyMainWindow {
  leaflet > separator {
    box-shadow: inset 0 $large_size $titlebar_bg_color;
  }

  box.vertical > paned.horizontal > box.sidebar.vertical {
    border-bottom-left-radius: $windows_radius;

    statusbar {
      border-bottom-left-radius: $windows_radius;
    }
  }

  stack#conversation_viewer {
    border-bottom-right-radius: $windows_radius;

    scrolledwindow.geary-conversation-scroller {
      viewport.frame {
        list.conversation-listbox {
          background: none;
          border-bottom-right-radius: $windows_radius;
        }
      }
    }
  }
}

preferencesgroup, .geary-accounts-editor-pane {
  list {
    @extend %circular_list;

    row.activatable { @extend %circular_row; }
  }
}

.geary-accounts-editor-pane {
  frame:not(.geary-signature) > border,
  scrolledwindow.frame { border: none; }
}

window.background.csd.unified {
  > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp {
    > list {
      @extend %circular_list;

      > row.activatable { @extend %circular_row; }
    }
  }
}

/************
 * Terminal *
 ************/
window.background { // gnome-terminal 3.32 setting
  > box.vertical > box.horizontal > frame {
    > border {
      border-width: 0 1px 0 0;
    }

    > scrolledwindow > viewport.frame {
      list {
        border-bottom-left-radius: $windows_radius;
      }
    }
  }

  > box.vertical > box.horizontal > stack {
    > widget > notebook.frame {
      border-width: 0;

      > stack {
        border-bottom-right-radius: $windows_radius;
      }
    }
  }
}


/**************
 * Extensions *
 **************/
window.background.csd {
  > stack, // GameMode setting
  > stack > scrolledwindow > viewport > box, // User Themes (Workspace) setting
  > box > stack > scrolledwindow > viewport > box {
    > list {
      @extend %circular_list;

      row.activatable { @extend %circular_row; }
    }
  }

  stack stack stack frame, // ArcMenu setting
  > stack > stack > box > frame, // Night Theme Switcher setting
  > stack > stack > box > box > frame, // Night Theme Switcher setting bottom lists
  > stack > box > stack > box > frame, // ArcMenu setting
  > stack > box > stack > scrolledwindow > viewport frame, // ArcMenu setting
  > stack > box > stack > box > scrolledwindow > viewport > frame, // ArcMenu setting
  > stack > grid > scrolledwindow > viewport > box > frame { // GSConnect setting
    > border { border: none; }

    > list {
      @extend %circular_list;

      row.activatable { @extend %circular_row; }
    }
  }

  > stack > box > box > list { // ArcMenu setting sidebar
    border-bottom-left-radius: $windows_radius;
  }
}


/***********
 * Dialogs *
 ***********/
dialog.background.csd {
  > box.dialog-vbox {
    > grid.horizontal {
      > scrolledwindow.frame {
        > viewport.frame {
          list:first-child { border-radius: 0 0 0 $windows_radius; }
          list:last-child { border-radius: 0 0 $windows_radius 0; }
        }
      }
    }

    > stack,
    > stack > stack {
      > scrolledwindow {
        border-radius: 0 0 $windows_radius $windows_radius;
        background-color: $base_color;

        iconview.view:not(:hover):not(:selected):not(:active) { // Wallpaper setting window
          // @extend %view;
          background-color: transparent;
        }
      }
    }

    stack scrolledwindow {
      &.frame {
        border-radius: $buttons_radius;

        textview.view {
          border-radius: $buttons_radius;

          > text {
            background: none;
          }
        }

        treeview.view:not(:hover):not(:selected) { background: none; }
      }

      viewport.frame {
        &.view { border-radius: $buttons_radius; }
      }
    }
  }
}


/******************
 * Unified window *
 ******************/

window.background.csd.unified {
  // Remove the sheen on headerbar...
  headerbar {
    box-shadow: inset 0 -1px $border_color;

    &.selection-mode {
      box-shadow: none;
    }
  }

  // ...and add it on the window itself
  > decoration-overlay {
    box-shadow: inset 0 1px $titlebar_highlight_color;
  }

  &,
  > decoration,
  > decoration-overlay {
    border-radius: $windows_radius;
  }

  &.tiled,
  &.tiled-top,
  &.tiled-right,
  &.tiled-bottom,
  &.tiled-left,
  &.maximized,
  &.fullscreen {
    > decoration-overlay {
      box-shadow: none;
    }

    &,
    > decoration,
    > decoration-overlay {
      border-radius: 0;
    }
  }
}
